<template>
  <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0; background-color: #454545d4" @click="destroyRecorder">
    <div @click.stop style="position: absolute;left: 50%;transform: translateX(-50%); bottom: 60px;width: 300px">
      <div style="position: relative;width:220px;height: 120px;margin: 0 auto;padding: 10px;box-sizing: border-box;background-color: #95ec69;border-radius: 5px">
        <div style="position: absolute; bottom: -12px;left: 50%;transform: translateX(-50%);border-left: 6px solid transparent;
                  border-bottom: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #95ec69;"></div>
        <canvas id="canvas"></canvas>
      </div>
      <div style="display: flex;margin-top: 30px;justify-content: space-between">
        <div @click="destroyRecorder" title="取消" class="el-icon-close" style="width: 40px;height: 40px;line-height: 40px;border-radius: 50%;text-align: center;font-size: 20px;color: #8b8b8b;background-color: #3a3a3a;cursor: pointer"></div>
        <div @click="stopRecording" title="发送" class="el-icon-check" style="width: 40px;height: 40px;line-height: 40px;border-radius: 50%;text-align: center;font-size: 20px;color: #8b8b8b;background-color: #3a3a3a;cursor: pointer"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Recorder from 'js-audio-recorder'
import {cancelAnimationFrame} from 'canvas-nest.js/lib/utils'
import AudioMessage from './AudioMessage.vue'

export default {
  components: {AudioMessage},
  data: function () {
    return {
      recorder: null,
      drawId: null,
      canvas: null,
      context: null,
      url: null
    }
  },
  mounted () {
    this.recorder = new Recorder({
      sampleBits: 16, // 采样位数
      sampleRate: 48000, // 采样率
      numChannels: 2 // 声道
    })

    this.startCanvas()
    this.startRecording()
  },
  methods: {
    startCanvas () {
      this.canvas = document.getElementById('canvas')
      this.canvas.width = 200
      this.canvas.height = 100
      this.context = this.canvas.getContext('2d')
    },
    // 销毁录音
    destroyRecorder () {
      this.recorder.destroy()
      this.$emit('hide')
    },
    startRecording () {
      this.recorder.start().then(() => {
        this.draw()
      }, (error) => {
        this.$alert('无法获取麦克风', '错误', {
          confirmButtonText: '关闭',
          type: 'error',
          center: true,
          callback: action => {
            this.destroyRecorder()
          }
        })
        console.error(error)
      })
    },
    async stopRecording () {
      this.recorder.stop()
      this.drawId && cancelAnimationFrame(this.drawId)
      this.drawId = null
      let blob = this.recorder.getWAVBlob()
      this.$emit('getAudio', blob)
    },
    /**
     * 绘制波浪图
     * */
    draw () {
      // 用requestAnimationFrame稳定60fps绘制
      this.drawId = requestAnimationFrame(this.draw)
      // 实时获取音频大小数据
      let dataArray = this.recorder.getRecordAnalyseData()
      let bufferLength = dataArray.length
      // 填充背景色
      this.context.fillStyle = '#95ec69'
      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height)
      // 设定波形绘制颜色
      this.context.lineWidth = 2
      this.context.strokeStyle = '#454545'
      this.context.beginPath()
      let sliceWidth = this.canvas.width * 1.0 / bufferLength // 一个点占多少位置，共有bufferLength个点要绘制
      let x = 0 // 绘制点的x轴位置
      for (let i = 0; i < bufferLength; i++) {
        let v = dataArray[i] / 128.0
        let y = v * this.canvas.height / 2
        if (i === 0) {
          // 第一个点
          this.context.moveTo(x, y)
        } else {
          // 剩余的点
          this.context.lineTo(x, y)
        }
        // 依次平移，绘制所有点
        x += sliceWidth
      }
      this.context.lineTo(this.canvas.width, this.canvas.height / 2)
      this.context.stroke()
    }
  }
}
</script>
<style>

</style>
